<template>
  <div class="discover">
    <!-- 分类标签栏 -->
    <div class="category-tabs">
      <van-tabs v-model:active="activeCategory" swipeable sticky animated>
        <van-tab v-for="category in categories" :key="category.id" :title="category.name">
          <!-- 瀑布流布局 -->
          <div class="waterfall">
            <div class="waterfall-column">
              <activity-card v-for="activity in leftActivities" :key="activity.id" :activity="activity"
                @click="goToDetail(activity.id)" />
            </div>
            <div class="waterfall-column">
              <activity-card v-for="activity in rightActivities" :key="activity.id" :activity="activity"
                @click="goToDetail(activity.id)" />
            </div>
          </div>

          <!-- 加载更多 -->
          <div class="load-more" v-if="hasMore" @click="loadMore">
            <van-loading v-if="loading" size="24px" color="#8a2be2">加载中...</van-loading>
            <span v-else>加载更多</span>
          </div>

          <van-empty v-if="filteredActivities.length === 0" description="暂无活动" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import ActivityCard from '@/components/activity/ActivityCard.vue';
import { useActivityStore } from '@/stores/activity';
import { showToast } from 'vant';

const router = useRouter();
const activityStore = useActivityStore();
const activeCategory = ref(0);
const loading = ref(false);
const hasMore = ref(true);
const currentPage = ref(1);
const pageSize = ref(6);

// 活动分类
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '休闲骑行' },
  { id: 2, name: '山地骑行' },
  { id: 3, name: '公路骑行' },
  { id: 4, name: '夜骑' },
  { id: 5, name: '亲子骑行' },
  { id: 6, name: '环湖骑行' },
  { id: 7, name: '长途骑行' }
]);

// 活动数据
const activities = ref([]);

// 生成模拟活动数据
const generateActivities = (page, size) => {
  const result = [];
  const startIndex = (page - 1) * size;

  for (let i = 0; i < size; i++) {
    const id = startIndex + i + 1;
    result.push({
      id: `${id}`,
      title: `活动标题 ${id}`,
      description: `这是活动描述 ${id}`,
      location: '杭州市西湖区',
      startTime: new Date().toISOString(),
      cover: `https://picsum.photos/300/400?random=${id}`,
      tags: ['休闲骑行', '环湖骑行']
    });
  }

  return result;
};

// 根据分类筛选活动
const filteredActivities = computed(() => {
  if (activeCategory.value === 0) {
    return activities.value;
  } else {
    const categoryName = categories.value[activeCategory.value].name;
    return activities.value.filter(activity =>
      activity.tags && activity.tags.includes(categoryName)
    );
  }
});

// 计算左右两列的活动
const leftActivities = computed(() => {
  return filteredActivities.value.filter((_, index) => index % 2 === 0);
});

const rightActivities = computed(() => {
  return filteredActivities.value.filter((_, index) => index % 2 === 1);
});

// 加载更多活动
const loadMore = async () => {
  if (loading.value) return;

  loading.value = true;

  // 模拟网络请求延迟
  await new Promise(resolve => setTimeout(resolve, 1000));

  const newActivities = generateActivities(currentPage.value + 1, pageSize.value);
  if (newActivities.length === 0) {
    hasMore.value = false;
  } else {
    activities.value = [...activities.value, ...newActivities];
    currentPage.value += 1;

    // 如果已经加载了所有活动
    if (currentPage.value * pageSize.value >= 50) {
      hasMore.value = false;
    }
  }

  loading.value = false;
};

// 切换分类时重置数据
const resetData = () => {
  activities.value = generateActivities(1, pageSize.value);
  currentPage.value = 1;
  hasMore.value = true;
};

// 监听分类变化
watch(activeCategory, () => {
  resetData();
});

onMounted(async () => {
  // 初始加载活动数据
  activities.value = generateActivities(currentPage.value, pageSize.value);
});

// 跳转到活动详情
const goToDetail = (id: string) => {
  router.push(`/activity/detail/${id}`);
};
</script>

<style scoped>
.discover {
  padding-bottom: 16vw;
}

.category-tabs {
  position: sticky;
  top: 12vw;
  z-index: 10;
  background-color: #fff;
}

:deep(.van-tabs__wrap) {
  height: 12vw;
}

:deep(.van-tab) {
  padding: 0 4vw;
  font-size: 3.5vw;
}

:deep(.van-tab--active) {
  color: #8a2be2;
  font-weight: bold;
}

:deep(.van-tabs__line) {
  background-color: #8a2be2;
}

.waterfall {
  display: flex;
  gap: 2vw;
  padding: 3vw;
}

.waterfall-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.load-more {
  text-align: center;
  color: #8a2be2;
  padding: 4vw 0;
  font-size: 3.5vw;
}
</style>